/** @method ConditionItem
 *  @description 单个条件
 **/
import React from 'react';
import { Icon, Row, Col, InputNumber } from 'antd';
import JunctionType from './JunctionType';
import PopValue from '../PopTab/PopValue';
import Operator from './Operator';
import { compare } from '../../utils/compare';
import { OPERATOR } from '../../utils/constant';

import './index.less';

export default function ConditionItem(props) {
  const { isTxt, logs, isHit } = props;
  const condition = props.value;
  // 修改左值
  const changeLeftValue = (value) => {
    condition.left_var_code = value.var_code;
    condition.left_var_name = value.var_name;
    condition.left_var_type = value.var_type;
    condition.right_var_code = '';
    condition.right_var_name = '';
    condition.right_var_type = '';
    // 苏州银行，新增event_id
    if (value.event_id) {
      condition.left_event_id = value.event_id;
    }
    props.onChange && props.onChange(condition);
  };

  // 修改右值
  const changeRightValue = (value) => {
    condition.right_var_code = value.var_code;
    condition.right_var_name = value.var_name;
    condition.right_var_type = value.var_type;
    // 新增event_id
    if (value.event_id) {
      condition.right_event_id = value.event_id;
    }
    //如果右值为空，则报warning
    if (value.var_code === '') {
      condition.isFocus = true;
    }
    props.onChange && props.onChange(condition);
  };

  // 修改趋势
  const changeRightValueNumber = (value) => {
    condition.right_var_code = value;
    condition.right_var_name = value;
    condition.right_var_type = 'literal';
    props.onChange && props.onChange(condition);
  };

  // 修改操作符
  const changeOperator = (value) => {
    condition.operator = value;
    condition.right_var_code = '';
    condition.right_var_name = '';
    props.onChange && props.onChange(condition);
  };

  // 根据operator获取operator对象
  const getOperatorObj = (operator) => props.operatorOptions.find((item) => item.operator === operator) || {};

  // 修改junction_type
  const changeJunctionType = (value) => {
    condition.junction_type = value;
    props.onChange && props.onChange(condition);
  };

  const placeholder = props.placeholder ? props.placeholder : ['', '', ''];
  return (
    <Row type='flex' align='middle' className='condition' gutter={20}>
      <Col
        span={4}
        style={{
          textAlign: 'right',
        }}
      >
        {((!props.isSingleCondition && !props.singleJunction) || (props.singleJunction && props.itemIndex === 0)) && (
          <JunctionType
            value={condition.junction_type}
            onChange={changeJunctionType}
            disabled={props.disabled}
            style={compare(props, 'junction_type')}
            isTxt={isTxt}
          />
        )}
      </Col>
      {!props.leftDisable && (
        <Col span={6}>
          <PopValue
            {...props}
            value={{
              var_code: condition.left_var_code,
              var_name: condition.left_var_name,
              var_type: condition.left_var_type,
            }}
            type={condition.left_var_type}
            event_id={condition.left_event_id}
            placeholder={placeholder[0] || ''}
            variable={props.variable}
            using_variables={props.using_variables}
            except={['literal']}
            onChange={changeLeftValue}
            disabled={props.disabled}
            dataType={condition.operator ? getOperatorObj(condition.operator).dataTypeLimit : undefined}
            style={compare(props, 'left_var_code')}
            strategyId={props.strategyId}
            isTxt={isTxt}
            logs={logs}
            isLeft={true}
          />
        </Col>
      )}

      {condition.operator && getOperatorObj(condition.operator).type === OPERATOR._RIGHT_ON && (
        <Col
          span={4}
          style={{
            textAlign: 'center',
          }}
        >
          <>
            近
            <InputNumber
              max={1000000000}
              min={0}
              value={condition.right_var_code}
              style={{
                width: '100px',
                margin: '0 5px',
                ...compare(props, 'right_var_code'),
              }}
              onChange={changeRightValueNumber}
              disabled={props.disabled}
            />
            次
          </>
        </Col>
      )}
      <Col
        span={
          condition.operator && getOperatorObj(condition.operator).type === OPERATOR._RIGHT_ON
            ? !props.leftDisable
              ? 6
              : 8
            : !props.leftDisable
            ? 4
            : 6
        }
      >
        <Operator
          value={condition.operator}
          placeholder={placeholder[1] || ''}
          onChange={changeOperator}
          operatorOptions={props.operatorOptions}
          disabled={props.disabled}
          style={compare(props, 'operator', 'operator')}
          isTxt={isTxt}
        />
      </Col>
      {((condition.operator && getOperatorObj(condition.operator).type === OPERATOR._NO_RIGHT) ||
        (condition.operator && getOperatorObj(condition.operator).type === OPERATOR._HAS_RIGHT) ||
        !condition.operator) && (
        <Col span={!props.leftDisable ? 6 : 10}>
          <PopValue
            {...props}
            value={{
              var_code: condition.right_var_code,
              var_name: condition.right_var_name,
              // isFocus: condition.isFocus,
            }}
            event_id={condition.right_event_id}
            type={condition.right_var_type || 'literal'}
            placeholder={placeholder[2] || ''}
            variable={props.variable}
            using_variables={props.using_variables}
            // limitType={condition.operator ? getOperatorObj(condition.operator).varTypeLimit : []}
            onChange={changeRightValue}
            disabled={
              props.disabled || (condition.operator && getOperatorObj(condition.operator).type === OPERATOR._NO_RIGHT)
            }
            style={compare(props, 'right_var_code')}
            strategyId={props.strategyId}
            isTxt={isTxt}
            leftVar={
              props.leftVar ||
              (condition.left_var_code && {
                code: condition.left_var_code,
                type: condition.left_var_type,
              })
            }
          />
        </Col>
      )}
      <Col span={4}>
        {!props.isSingleCondition && (
          <>
            {!props.disabled && props.isDelBtn && (
              <Icon type='minus-circle' className='op-btn' onClick={() => props.onDel() && props.onDel()} />
            )}
            {!props.disabled && props.isAddBtn && (
              <Icon type='plus-circle' className='op-btn' onClick={() => props.onAdd() && props.onAdd()} />
            )}
          </>
        )}
        {logs && <>{isHit ? <span className='top_tag'>命中</span> : '未命中'}</>}
      </Col>
    </Row>
  );
}
